import type { JSX } from "solid-js";
import { Portal } from "solid-js/web";
import { cn } from "@/common/cn";
import Button from "./Button";
import Panel from "./Panel";

type ModalProps = {
  children?: JSX.Element | undefined;
  visible?: boolean | null | undefined;
  onClose?: () => void;
  width?: number;
};

export default function Modal(p: ModalProps) {
  return (
    <Portal>
      <div
        class={cn(
          "fixed top-0 left-0 w-screen h-screen bg-black/50 m-0 p-0 flex justify-center items-start",
          p.visible || "collapse",
        )}
        style={{ "z-index": 1000 }}
      >
        <Panel title="xxx" class="bg-white top-[100px] mt-48" style={{ width: `${p.width || 560}px` }}>
          {p.children}
          <Button onClick={p.onClose}>Close</Button>
        </Panel>
      </div>
    </Portal>
  );
}
